import React, { Component } from "react";
import classNames from "classnames";
import { View } from "@tarojs/components";
import { observer, inject } from "mobx-react";
import { Header } from "../../components/header";
import { Charts } from "./charts";
import { FileComponent } from "../file/file-component";
import "./index.scss";
import { IndexTab } from "./index-tab";
import { TaskList } from "./task-list";
import { RootStore } from "../../../src/store/root-store";
import { isSafari } from "../../../src/utils/check-browser";

type PageStateProps = {
  rootStore: RootStore;
};

interface Index {
  props: PageStateProps;
}

@inject("rootStore")
@observer
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = { current: 0 };
  }
  componentWillMount() {}

  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  render() {
    const {
      rootStore: { curChannelInfo, setCurChannelInfo },
    } = this.props;
    return (
      <View className="index">
        <Header
          curChannelInfo={curChannelInfo}
          setCurChannelInfo={setCurChannelInfo}
        />
        <div className="index-container">
          {curChannelInfo?.type === "index" && (
            <IndexTab key={curChannelInfo?.id} />
          )}
          {curChannelInfo?.type === "demand" && (
            <TaskList key={curChannelInfo?.id} />
          )}
          {curChannelInfo?.type === "dashboard" && (
            <Charts key={curChannelInfo?.id} />
          )}
          {curChannelInfo?.type === "file" && (
            <FileComponent
              tab
              channelId={curChannelInfo.id}
              key={curChannelInfo?.id}
            />
          )}
          {isSafari() && <div className={classNames("bottom-div")} />}
        </div>
      </View>
    );
  }
}

export default Index;
